<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

//出入库
let tableData = ref([{}])
let currentPage = ref(1)
let pageSize = ref(10)
let total = ref(0)
let showDatePicker = ref(false)
// 定义选中的产品类型
let selectedMaterialType = ref('')
// 定义选中的产品属性
let selectedMaterialAttribute = ref('')
// 定义选中的产品分类
let selectedMaterialCategory = ref('')

const $router = useRouter()

const handleSelectionChange = (selection: any[]) => {
  console.log('Selected rows:', selection)
  // 可以在这里处理选中的行数据
}


// 定义物料类型选项
const MaterialTypeOptions = ref([
  { label: '半成品', value: '半成品' },
  { label: '成品', value: '成品' },
  { label: '其他', value: '其他' }
])

// 定义物料属性选项
const MaterialAttributeOptions = ref([
  { label: '自制', value: '自制' },
  { label: '委外', value: '委外' },
  { label: '外购', value: '外购' },
  { label: '其他', value: '其他' }
])

// 定义物料分类选项
const MaterialCategoryOptions = ref([
  { label: '分类一', value: 'category1' },
  { label: '分类二', value: 'category2' },
  { label: '分类三', value: 'category3' },
  { label: '分类四', value: 'category4' },
  { label: '分类五', value: 'category5' },
  { label: '分类六', value: 'category6' },
  { label: '分类七', value: 'category7' }
])


// 控制当前是出库还是入库
const currentTab = ref<'outbound' | 'inbound'>('inbound') // 默认选中“入库记录”

const handler = (page: number) => {
  currentPage.value = page
}
const sizeHandler = (page_size: number) => {
  pageSize.value = page_size
}
const gotoAdd = () => {
  $router.push('/production/addProject')
}

</script>

<template>
  <div style="padding: 20px">


    <el-card>
      <div class="operateContainer">
        <div class="formContainer" :style="showDatePicker ? 'height:145px' : 'height:32px'">
          <el-form inline>
            <el-form-item>
              <el-input placeholder="请输入物料编号/名称" style="width: 250px"></el-input>
            </el-form-item>

            <el-form-item>
              <el-select v-model="selectedMaterialType" placeholder="请选择物料类型" style="width: 250px">
                <el-option
                    v-for="item in MaterialTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-select v-model="selectedMaterialCategory" placeholder="请选择物料属性" style="width: 250px">
                <el-option
                    v-for="item in MaterialAttributeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>


            <div style="margin-top: 20px">
              <el-form-item>
                <el-date-picker
                    style="width: 250px"
                    type="date"
                    placeholder="请选择入库时间"
                ></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="请输入工单名称 编号/名称" style="width: 250px"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input
                    style="width: 250px"
                    placeholder="请输入批次号"
                ></el-input>
              </el-form-item>
            </div>

            <div style="margin-top: 20px">
              <el-form-item>
                <el-select v-model="selectedMaterialAttribute" placeholder="请选择物料分类" style="width: 250px">
                  <el-option
                      v-for="item in MaterialCategoryOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-date-picker
                    placeholder="请选择有效期"
                    style="width: 250px"
                    type="date"></el-date-picker>
              </el-form-item>
            </div>


          </el-form>
        </div>
        <div class="searchOperate">
          <div class="button">
            <el-button type="primary" plain style="width: 80px">重置</el-button>
            <el-button type="primary" style="width: 80px">查询</el-button>
          </div>
          <div class="more">
            <el-button type="primary" link @click="showDatePicker = !showDatePicker">更多</el-button>
            <el-icon color="#1B9AEE" :class="{ 'rotate-180': showDatePicker }">
              <CaretBottom />
            </el-icon>
          </div>
        </div>
      </div>
    </el-card>

    <el-card style="margin-top: 20px">


      <div class="operate">
        <el-tabs v-model="currentTab" @tab-click="() => {}">
          <el-tab-pane label="入库记录" name="inbound"></el-tab-pane>
          <el-tab-pane label="出库记录" name="outbound"></el-tab-pane>
        </el-tabs>
        <el-button style="width: 80px" type="primary" plain>导出</el-button>
      </div>

      <el-table :data="tableData" style="margin-top: 15px" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column align="center" label="序号" type="index" width="60" fixed="left"></el-table-column>
        <el-table-column align="center" label="物料名称" fixed="left" width="100"></el-table-column>
        <el-table-column align="center" label="物料编号" fixed="left" width="100"></el-table-column>
        <el-table-column align="center" label="规格型号" width="100"></el-table-column>
        <el-table-column align="center" label="单位" width="90"></el-table-column>
        <el-table-column align="center" label="物料类型" width="100"></el-table-column>
        <el-table-column align="center" label="物料属性" width="90"></el-table-column>
        <el-table-column align="center" label="物料分类" width="90"></el-table-column>
        <el-table-column align="center" label="批次号" width="90"></el-table-column>
        <el-table-column align="center" label="有效期" width="90"></el-table-column>
        <el-table-column
            align="center"
            :label="currentTab === 'outbound' ? '出库日期' : '入库日期'"
            width="90"
        ></el-table-column>
        <el-table-column
            align="center"
            :label="currentTab === 'outbound' ? '出库数量' : '入库数量'"
            width="90"
        ></el-table-column>
        <el-table-column align="center" label="仓库名称" width="90"></el-table-column>
        <el-table-column align="center" label="库区名称" width="90"></el-table-column>
        <el-table-column align="center" label="库位名称" width="90"></el-table-column>
        <el-table-column align="center" label="工号名称" width="90"></el-table-column>
        <el-table-column align="center" label="工单编号" width="90"></el-table-column>

      </el-table>

      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          :background="true"
          layout="prev,pager,next,jumper,->,sizes,total"
          :total="total"
          @current-change="handler"
          @size-change="sizeHandler"
          style="margin-top: 10px"
      ></el-pagination>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
/* 调整 el-tabs 标签页字体样式 */
:deep(.el-tabs__item) {
  font-size: 16px; // 字号
  color: #333; // 颜色
  font-weight: bold; // 加粗
}

/* 当前激活 tab 的样式（可选） */
:deep(.el-tabs__item.is-active) {
  color: #1B9AEE; // 激活时的颜色
  font-weight: bold;
}

.operateContainer {
  display: flex;
  align-content: center;
  justify-content: space-between;
  .formContainer {
    width: 1060px;
    height: 32px;
    transition: height 0.3s ease;
    overflow: hidden;
    .el-form-item {
      margin-bottom: 0;
    }
  }
  .searchOperate {
    display: flex;
    align-items: center;
    .more {
      margin-left: 20px;
      display: flex;
      align-items: center;
    }
  }
}

.rotate-180 {
  transition: transform 0.3s ease;
  transform: rotate(180deg);
}
</style>
